<script setup lang="ts">

import {ref, onMounted} from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage,ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import router from '@/router';

import {apiStandardsDetail,apiLessonContentRemove,apiSkillList,apiLessonContentSave,apiLessonContentUpdate,apiStandardsExport,apiLessonSave,
apiLessonRemove,
apiLessonUpdate} from '@/api/api'


const standardId = ref(useRoute().query.id)

const standardDetail =ref({})
const lessionData =ref([])
const lessionCount =ref(0)

const skillCount =ref(0)
async function handlerStandardDetail() {
  const data  = await apiStandardsDetail(standardId.value)
  if (data.code != 0) {
    console.log(data)
    ElMessage.error("执行失败， 请联系管理员")
    return 
  }
  standardDetail.value = data.data
  lessionCount.value = standardDetail.value.lessons.length
  const tmp = {count:0}
  standardDetail.value.lessons.forEach((v)=>{

    const skill = []
    v.lessonInfos.forEach((vv)=>{
      tmp.count = tmp.count + vv.skills.length

      vv.skills.forEach((s)=>{
        const clessioninfo = {
          lessonContentId:vv.lessonContentId,
          lessonContent:vv.lessonContent,
          skillId:s.skillId,
          skillName:s.skillName,
          eduSkillLessonContentId:s.eduSkillLessonContentId,
        }
        skill.push(clessioninfo)
      })


    })
    v.lskill = skill
    // lessionData.value.push(lession)
  })
  skillCount.value = tmp.count


}




async function handleDeleteSkill(index, value){
  const resp  = await apiLessonContentRemove(value.eduSkillLessonContentId)
  if (resp.code != 0) {
        console.log(resp)
        ElMessage.error("执行失败， 请联系管理员")
        return 
   }
  ElMessage({
    message: '删除成功！',
    type: 'success',
  })
 handlerStandardDetail()

}




const drawer = ref({
  opentype:"create",
  title:"添加课程绑定技能点",
  flag:false,
})
const parmsAddSkill =ref({
  lessonContent:"",
  tlessonContent:"",
  lessonContentId:0,
  lessonId:0,
  skillId:0,
  skillName:0,
})
const tmpAddSkillLession =ref({})
const paramsSkillList = ref({
  pageSize:200,
  pageNum:1, 
})
const skills = ref([])
async function loadSkillList(){
  const data =  await apiSkillList(paramsSkillList.value)
  if (data.code != 0) {
        console.log(data)
        ElMessage.error("加载技能表失败，请练习管理员！")
        return 
   }
   skills.value = data.rows
   paramsSkillList.value.total = data.total
}
const handlerAddSkillLessionChange = (value)=>{
    parmsAddSkill.value.lessonContent = value.lessonContent
    parmsAddSkill.value.tlessonContent = value.lessonContent
    parmsAddSkill.value.lessonContentId = value.lessonContentId
}

const handlerAddSkillSkill=(skill)=>{
  parmsAddSkill.value.skillId = skill.id
}

const openAddSkillDrawer = (lessionInfo)=>{
  drawer.value.flag = true
  drawer.value.opentype="create"
  drawer.value.title="添加课程绑定技能点"
  tmpAddSkillLession.value = lessionInfo
  parmsAddSkill.value.lessonId= lessionInfo.lessonId
}

function openUpdateSkillDrawer (index, value,info){
  drawer.value.flag = true
  drawer.value.opentype="update"
  drawer.value.title="修改课程绑定技能点"

  tmpAddSkillLession.value = info
  parmsAddSkill.value.eduSkillLessonContentId= value.eduSkillLessonContentId
  parmsAddSkill.value.lessonId= info.lessonId
  parmsAddSkill.value.lessonContent=value.lessonContent
  parmsAddSkill.value.tlessonContent=value.lessonContent
  parmsAddSkill.value.lessonContentId=value.lessonContentId
  parmsAddSkill.value.lessonId=info.lessonId
  parmsAddSkill.value.skillId=value.skillId
  parmsAddSkill.value.skillName=value.skillName

}



async function handlerAddSkill(){
  const req = {
    lessonContent: parmsAddSkill.value.lessonContent,
    lessonId:parmsAddSkill.value.lessonId,
    skillId:parmsAddSkill.value.skillId,
  }

  if (parmsAddSkill.value.lessonContent == ""){
      ElMessage.error('请输入标准名称')
    
    return 
  }

    if (parmsAddSkill.value.lessonContent ==parmsAddSkill.value.tlessonContent){
        req.lessonContentId =parmsAddSkill.value.lessonContentId
    }

  const data =  await apiLessonContentSave(req)
  if (data.code != 0) {
        console.log(data)
        ElMessage.error("执行失败， 请联系管理员")
        return 
   }
  ElMessage({
      message: '关联成功！',
      type: 'success',
    })
  handlerStandardDetail()
}


async function handlerUpdateSkill(){
  const req = {
    lessonContent: parmsAddSkill.value.lessonContent,
    skillId:parmsAddSkill.value.skillId,
    eduSkillLessonContentId:parmsAddSkill.value.eduSkillLessonContentId,
    }
    if (parmsAddSkill.value.lessonContent ==parmsAddSkill.value.tlessonContent){
        req.lessonContentId =parmsAddSkill.value.lessonContentId
    }
  const data =  await apiLessonContentUpdate(req)
  if (data.code != 0) {
        console.log(data)
        ElMessage.error("执行失败， 请联系管理员")
        return 
   }
  ElMessage({
      message: '更新成功！',
      type: 'success',
    })
  handlerStandardDetail()
}

async function handlerExport(){
  const resp = await apiStandardsExport(standardId.value)

  saveFile(resp)

}

function saveFile(content) {
  const blob = new Blob([content], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
  const anchorElement = document.createElement('a');
  anchorElement.href = window.URL.createObjectURL(blob);
  anchorElement.download = standardDetail.value.standardName+".xlsx";
  anchorElement.click();
}


const toStandardList=()=>{
    router.push({ path: '/standard/list' })

}

const paramsAddLession =ref({
  openFlag: false 
})


async function handlerCreateLession(){
  if (!paramsAddLession.value.lessonName){
    ElMessage.error('请输入课程名称')
    return 
  }
  paramsAddLession.value.teachStandardId = standardDetail.value.id
  paramsAddLession.value.teachStandardName = standardDetail.value.standardName
  paramsAddLession.value.lessonContentList = [paramsAddLession.value.lessonName]
  const resp = await apiLessonSave(paramsAddLession.value)
    if (resp.code != 0) {
        console.log(resp)
        ElMessage.error("添加失败， 请联系管理员")
        return 
   }
  ElMessage({
      message: '添加成功！',
      type: 'success',
    })
  paramsAddLession.value.openFlag= false
  handlerStandardDetail()

}

const paramsUpdateLession =ref({
  openFlag: false 
})


const handlerOpenUpdateLession =(item)=>{
  paramsUpdateLession.value.openFlag= true
  paramsUpdateLession.value.raw = item
  paramsUpdateLession.value.lessonName = paramsUpdateLession.value.raw.lessonName

}

async function handlerUpdateLession(){
  if (!paramsUpdateLession.value.lessonName){
    ElMessage.error('请输入课程名称')
    return 
  }
  if (paramsUpdateLession.value.lessonName == paramsUpdateLession.value.raw.lessonName){
    paramsUpdateLession.value.openFlag= false
    return 
  }
  paramsUpdateLession.value.id = paramsUpdateLession.value.raw.lessonId
  paramsUpdateLession.value.teachStandardId = standardDetail.value.id
  paramsUpdateLession.value.teachStandardName = standardDetail.value.standardName

  const req = {
    id : paramsUpdateLession.value.raw.lessonId,
    teachStandardId : standardDetail.value.id,
    teachStandardName : standardDetail.value.standardName,
    lessonName: paramsUpdateLession.value.lessonName,
  }
  const resp = await apiLessonUpdate(req)
    if (resp.code != 0) {
        console.log(resp)
        ElMessage.error("添加失败， 请联系管理员")
        return 
   }
  ElMessage({
      message: '添加成功！',
      type: 'success',
    })
  handlerStandardDetail()
  paramsUpdateLession.value.openFlag= false

}

const paramsDeleteLession =ref({
  openFlag: false 
})


const handlerOpenDeleteLession =(item)=>{
  paramsDeleteLession.value.openFlag= true
  paramsDeleteLession.value.raw = item
  paramsDeleteLession.value.lessonName = paramsDeleteLession.value.raw.lessonName


  ElMessageBox.confirm(
    '将会删除课程'+paramsDeleteLession.value.raw.lessonName,
    '注意',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',

    }
  )
    .then(() => {
      handlerDeleteLession()

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消',
      })
    })
}

async function handlerDeleteLession(){
  const resp = await apiLessonRemove(paramsDeleteLession.value.raw.lessonId)
    if (resp.code != 0) {
        console.log(resp)
        ElMessage.error("删除失败， 请联系管理员")
        return 
   }
  ElMessage({
      message: '删除成功！',
      type: 'success',
    })
  paramsDeleteLession.value.openFlag= false
  handlerStandardDetail()

}

const handlerDownloadRaw=()=>{

  const addr = "http://192.168.2.8:8899/"+encodeURIComponent(standardDetail.value.filePath)
  console.log(addr)

  router.push({ path: addr })


}

onMounted(() => {
  handlerStandardDetail()
})

</script>

<template>
  <el-button  type="primary" @click="toStandardList" >返回</el-button>
  <el-descriptions class="info_box" title="基础信息" :column="2">
    <el-descriptions-item label="标准名称">{{ standardDetail.standardName }}</el-descriptions-item>
    <el-descriptions-item label="导入用户">{{ standardDetail.fileImportUserName }}</el-descriptions-item>
    <el-descriptions-item label="专业">
      {{standardDetail.mainMajorName}}/{{standardDetail.subMajorName}}/{{standardDetail.majorName}}
    </el-descriptions-item>
    <el-descriptions-item label="导入时间">{{standardDetail.fileImportTime}}</el-descriptions-item>
    <el-descriptions-item label="课程数">{{lessionCount}}</el-descriptions-item>
    <el-descriptions-item label="知识点/技能点数">{{skillCount}}</el-descriptions-item>
    <el-descriptions-item >
          <el-link class="download_raw" type="primary" @click="handlerDownloadRaw">原文下载</el-link>
          <el-link type="primary" @click="handlerExport">导出分析结果</el-link>
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions class="info_box" title="课程信息" :column="1">
     <template #extra>
        <!-- <el-icon>
          <Plus @click="paramsAddLession.openFlag=true" type="primary" color="#409EFF" />
        </el-icon> -->
      <el-button type="primary" @click="paramsAddLession.openFlag=true" size="small">添加课程</el-button>

     </template>

    <el-descriptions-item v-for="info in standardDetail.lessons" >
      <template #label>
        课程：{{info.lessonName}}

      <el-button-group class="right_button" size="small">
      <!-- <el-button type="primary" @click="openAddSkillDrawer(info)">添加</el-button> -->
      <el-button type="primary" @click="handlerOpenUpdateLession(info)">编辑</el-button>
      <el-button type="danger" @click="handlerOpenDeleteLession(info)">删除</el-button>
      </el-button-group>
        
      </template>

    <el-table class="skill_list"  :data="info.lskill" style="width: 100%">
    <el-table-column label="技能点/知识点"  prop="skillName" width="280" />
    <el-table-column label="教学内容与要求"  prop="lessonContent" width="280" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="openUpdateSkillDrawer(scope.$index, scope.row, info)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDeleteSkill(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>



    </el-table-column>
  </el-table>
  <!-- <el-button size="small" circle @click="openAddSkillDrawer(info)">添加</el-button> -->
  <el-icon class="addSkillB" @click="openAddSkillDrawer(info)"><Plus /></el-icon>
    </el-descriptions-item>
  </el-descriptions>

  <el-drawer
    v-model="drawer.flag"
    :title="drawer.title"
    direction="rtl"
    :size="800"
    @open="loadSkillList"
  >
  <el-form  label-width="120px">
    <el-form-item v-show="drawer.opentype=='create'" label="教学内容">
    <el-input v-model="parmsAddSkill.lessonContent" placeholder="教学内容" clearable >
        <template #prepend>
        <el-select @change="handlerAddSkillLessionChange" placeholder="关键已有内容" style="width: 130px">
          <el-option v-for="lession in tmpAddSkillLession.lessonInfos" :label="lession.lessonContent" :value="lession" />
        </el-select>
      </template>
    </el-input>     
    </el-form-item>
    
    <el-form-item v-show="drawer.opentype=='update'" label="教学内容">
      {{parmsAddSkill.lessonContent}}
    </el-form-item>

    <el-form-item label="关联技能点">
    <el-radio-group v-model="parmsAddSkill.skillName" size="large">
      <el-radio-button v-for="skill in skills" :label="skill.skillName"  @change="handlerAddSkillSkill(skill)" />
    </el-radio-group>


    </el-form-item>
  </el-form>
    <el-pagination  :page-size="paramsSkillList.pageSize" layout=" prev, pager, next, total" :total="paramsSkillList.total" v-model:current-page="paramsSkillList.pageNum" @current-change="loadSkillList" />

  
  <el-button v-show="drawer.opentype=='create'"  class="sub_button"  type="primary" @click="handlerAddSkill" >添加</el-button>
  <el-button v-show="drawer.opentype=='update'"  class="sub_button"  type="primary" @click="handlerUpdateSkill" >更新</el-button>

  </el-drawer>


<el-dialog v-model="paramsAddLession.openFlag" :show-close="false"   title="添加新课程">
<div class="box" >

 <el-form :model="paramsAddLession" label-position="right"      label-width="100px">
    <el-form-item label="课程名称">
      <el-input     placeholder="课程名称" v-model="paramsAddLession.lessonName" />
    </el-form-item>
    <!-- <el-form-item label="教学内容">
      <el-input  placeholder="教学内容" v-model="paramsAddLession.lessonName" />
    </el-form-item> -->
  </el-form>
    <el-button-group class="right_button">
    <el-button type="primary" @click="handlerCreateLession">确定</el-button>
    <el-button type="primary" @click="paramsAddLession.openFlag=false">取消</el-button>
    </el-button-group>

</div>

</el-dialog>

<el-dialog v-model="paramsUpdateLession.openFlag" :show-close="false"   title="修改信息">
<div class="box" >
 <el-form :model="paramsUpdateLession" label-position="right"      label-width="100px">
    <el-form-item label="课程名称">
      <el-input     placeholder="课程名称" v-model="paramsUpdateLession.lessonName" />
    </el-form-item>

  </el-form>
    <el-button-group class="right_button">
    <el-button type="primary" @click="handlerUpdateLession">确定</el-button>
    <el-button type="primary" @click="paramsUpdateLession.openFlag=false">取消</el-button>
    </el-button-group>
</div>
</el-dialog>

<!-- <el-dialog v-model="paramsDeleteLession.openFlag" :show-close="false"   title="确定删除课程">
<div class="box" >
  {{paramsDeleteLession.raw.lessonName}}

    <el-button-group class="right_button">
    <el-button type="primary" @click="handlerDeleteLession">确定</el-button>
    <el-button type="primary" @click="paramsDeleteLession.openFlag=false">取消</el-button>
  </el-button-group>
</div>
</el-dialog> -->

</template>

<style scoped>
.box{
  background-color: white;
  padding: 2em;
}
.skill_list{
  margin: 0  auto;
}
.right_button{
  float: right;
}

.sub_button{
  margin-top: 2em;
}
.addSkillB{
  margin-left: 1.5em;
  margin-top: 1em;
}
.download_raw{
  margin-right: 10px;
}
</style>